<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手机号验证</title>
    <style>
      input {
        /* outline: 外轮廓 -- none去掉默认的外轮廓 */
        outline: none;
        border: 1px solid gray;
        border-radius: 2px;
        transition: all 0.2s;
      }
      input:focus {
        border-color: blue;
      }
      input.err {
        border-color: red;
      }
      /* 兄弟关系: + */
      input + div {
        color: red;
        margin-left: 52px;
        display: none;
      }
      input.err + div {
        display: block;
      }
    </style>
  </head>
  <body>
    <div>
      <span>手机号</span>
      <input type="text" />
      <div>手机号码格式不正确</div>
    </div>

    <script>
      //1. 查到 input 元素
      const inp = document.querySelector('input')
      //2. 绑定 onblur 失去焦点事件
      inp.onblur = function () {
        //3. 利用正则 验证输入框的值 是否正确:  /^1[3-9]\d{9}$/.test(手机号)
        //   - 如果结果false, 则添加err样式, 否则移除err样式
        var reg = /^1[3-9]\d{9}$/

        if (reg.test(this.value)) {
          // 正确
          this.classList.remove('err')
        } else {
          // 错误
          this.classList.add('err')
        }
      }

      // 获得焦点时: 去掉err样式
      inp.onfocus = function () {
        this.classList.remove('err')
      }
    </script>
  </body>
</html>
